<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h1>{{ msg }}</h1>
    <p>
        在定义组件的时候，有些组件是由多个部分进行构成的。
        例如 Boostrap里面的面板组件。

        https://v3.bootcss.com/components/

    </p>

    <i-pannel>
        <h2 slot="header">我们指定了头部插槽</h2>
        <div slot="content">面板的内容</div>
        <div slot="footer">面板的底部</div>

        <div slot="default">
            其他的内容
        </div>

    </i-pannel>

    <!--
        如果在组件调用时候，我们内部存在没有指定  slot 的内容，则会被放置在 组件 template 属性的 匿名插槽或者 default插槽里面。匿名插槽相当于是 name='default' 插槽。
    -->
</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    /*
    * 1. 头部
    * 2. 内容
    * 3. 底部
    *
    * */


    /*如果 slot 有name属性，我们叫做具名插槽（具有名称的插槽） 有名插槽*/
    Vue.component('i-pannel', {

        template: `
            <div>
                <slot name="header">
                <div>面板的头部（default）</div>
</slot>
                <slot name="content">默认值</slot>
                <slot name="footer">
                 <div>面板的底部（default）</div>
</slot>
                <slot name="default"></slot>
                <slot></slot>
                <slot></slot>
                <slot></slot>

            </div>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '插槽'
        }
    })

</script>

</html>
